<template>
  <div class="video">
    <div class="video-content">
      <h1>
        {{ videoData.video_name }}
      </h1>
      <video controls width="640" height="360" :src="videoData.video_url">
      </video>
      <br>
      <div>创建时间：{{ videoData.create_time }}</div>
    </div>
    <div class="is-pass">
      <h2>审核</h2>
      <el-radio-group v-model="videoData.ispass">
        <el-radio value="1" size="large">通过</el-radio>
        <el-radio value="2" size="large">不通过</el-radio>
      </el-radio-group>
      <br>
      <el-input class="unpass_reason"
                v-if="videoData.ispass==2"
                type="textarea"
                style="width: 400px"
                placeholder="请写出不通过的理由"
                v-model="videoData.unpass_reason"
                :rows="8"
                clearable>
      </el-input>
      <br>
      <div>上次审核时间：{{ videoData.pass_time }}</div>
      <br>
      <el-button type="primary" @click="handlePass">提交</el-button>
    </div>
  </div>

</template>

<script setup>
import {ref, onMounted} from "vue";
import {useRoute} from "vue-router";
import {getVideoById, passVideo} from '@/apis/apis.js';
import {ElMessage} from "element-plus";

const route = useRoute();
const videoId = route.params.videoId;
const videoData = ref({
  video_id: videoId,
  ispass: '',
  unpass_reason: ''
})
onMounted(() => {
  fetchVideo();
})
const handlePass = () => {
  updateVideo(videoData.value)
}
//从后端获取视频详情
const fetchVideo = async () => {
  try {
    const rep = await getVideoById(videoId);
    console.log(rep)
    if (rep.data.status === 1) {
      videoData.value = rep.data.data;
    } else {
      ElMessage.error(rep.data.msg)
    }
  } catch (error) {
    console.log(error);
    ElMessage.error("连接失败！");
  }
}
//后端:审核
const updateVideo = async (data) => {
  try {
    const rep = await passVideo(data);
    console.log(rep)
    if (rep.data.status === 1) {
      ElMessage.success("审核成功！")
    } else {
      ElMessage.error(rep.data.msg)
    }
  } catch (error) {
    console.log(error);
    ElMessage.error("连接失败！");
  }
}
</script>

<style scoped>
.video {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 30px;
}

.video-content, .is-pass {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 20px;
  border-radius: 10px;
  background: rgba(167, 223, 255, 0.25);
}

.video {
}

</style>